<template>
    <div>
        <div class="swiperBox">
            <img src="https://p0.meituan.net/travelcube/ea9b3f6c3156f69cac6e7baef295d7c2296624.jpg.webp@750w_80q" alt="">
        </div>
        <div class="swiperCon">
            <img src="/images/swiperBg1.png" alt="">
            <div class="swiperlistCon">
                <img src="/images/swiperBg2.png" alt="">
                <div class="con-lists-top">
                    <img src="/images/kxmh.png" alt="">
                    <div class="con-right">
                        <div class="selectSeat">选座购票</div>
                        <h1>开心麻花2020年底大戏</h1>
                        <p class="score">8.7</p>
                        <p class="adr">北京 海淀剧院</p>
                        <p class="showTime"> 2021-09-10 19:30</p>
                        <p class="money">￥
                            <span>80</span>起</p>
                    </div>
                </div>
                <div class="con-lists-top">
                    <img src="/images/kxmh.png" alt="">
                    <div class="con-right">
                        <div class="selectSeat">选座购票</div>
                        <h1>开心麻花2020年底大戏</h1>
                        <p class="score">8.7</p>
                        <p class="adr">北京 海淀剧院</p>
                        <p class="showTime"> 2021-09-10 19:30</p>
                        <p class="money">￥
                            <span>80</span>起</p>
                    </div>
                </div>
                <div class="con-lists-top">
                    <img src="/images/kxmh.png" alt="">
                    <div class="con-right">
                        <div class="selectSeat">选座购票</div>
                        <h1>开心麻花2020年底大戏</h1>
                        <p class="score">8.7</p>
                        <p class="adr">北京 海淀剧院</p>
                        <p class="showTime"> 2021-09-10 19:30</p>
                        <p class="money">￥
                            <span>80</span>起</p>
                    </div>
                </div>
                <div class="con-lists-top">
                    <img src="/images/kxmh.png" alt="">
                    <div class="con-right">
                        <div class="selectSeat">选座购票</div>
                        <h1>开心麻花2020年底大戏</h1>
                        <p class="score">8.7</p>
                        <p class="adr">北京 海淀剧院</p>
                        <p class="showTime"> 2021-09-10 19:30</p>
                        <p class="money">￥
                            <span>80</span>起</p>
                    </div>
                </div>
                <div class="con-lists-top">
                    <img src="/images/kxmh.png" alt="">
                    <div class="con-right">
                        <div class="selectSeat">选座购票</div>
                        <h1>开心麻花2020年底大戏</h1>
                        <p class="score">8.7</p>
                        <p class="adr">北京 海淀剧院</p>
                        <p class="showTime"> 2021-09-10 19:30</p>
                        <p class="money">￥
                            <span>80</span>起</p>
                    </div>
                </div>
                <div class="con-lists-top">
                    <img src="/images/kxmh.png" alt="">
                    <div class="con-right">
                        <div class="selectSeat">选座购票</div>
                        <h1>开心麻花2020年底大戏</h1>
                        <p class="score">8.7</p>
                        <p class="adr">北京 海淀剧院</p>
                        <p class="showTime"> 2021-09-10 19:30</p>
                        <p class="money">￥
                            <span>80</span>起</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
export default {}
</script>
<style scoped>
.swiperBox img {
  width: 100%;
}
.swiperCon {
  width: 100%;
}
.swiperCon img {
  width: 100%;
}
.swiperlistCon {
  width: 100%;
    overflow: hidden;
}
.con-lists-top {
  width: 80%;
  height: 3.2rem;
  background: #ffffff;
  display: flex;
  border-radius: 0.2rem;
  margin: 0 auto 0.5rem auto;
  position: relative;
  top: -7.2rem;

}
.con-lists-top img {
  width: 40%;
}
.selectSeat {
  display: block;
  width: 1.2rem;
  height: 0.5rem;
  line-height: 0.5rem;
  color: #ff5f10;
  font-size: 0.26rem;
  background: #fff5f1;
  text-align: center;
}
.con-right {
  position: relative;
}
.con-right h1 {
  font-size: 0.34rem;
  font-weight: bold;
}
.con-lists-top img {
  border-radius: 0.1rem;
  overflow: hidden;
  margin-right: 0.2rem;
}
.con-right .score {
  color: grey;
  /* background: #000; */
  color: #ff9d3f;
  font-weight: bold;
  margin-bottom: 0.2rem;
}
.con-right .adr,
.con-right .showTime,
.con-right .money {
  color: grey;
  margin-bottom: 0.2rem;
}
.con-right .money span {
  font-size: 0.36rem;
  color: #000;
}
.con-right-bottom {
  width: 1.2rem;
  text-align: center;
  height: 0.6rem;
  line-height: 0.6rem;
  border-radius: 0.5rem;
  position: absolute;
  background-image: linear-gradient(to top, #ff2851, #ff7750);
  right: -0.6rem;
  bottom: 0;
  color: #ffffff;
  font-weight: bold;
}
</style>